<template>
	<view>
		<view class="box_bg"
			:style="'background: url('+ u_imgPath + 'shouye/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<view class="info">
			<view class="swiper-wrap" :style="{'margin-top':`-${44}px`}">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="goods-img">
					<swiper-item v-for="(img,index) in info.detail_image" :key="index">
						<image :src="img" class="goods-img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="info-shop"
				:style="'background: url('+ u_imgPath + 'shouye/shop_detail_price.png'+ ') repeat-y 0 0 / 100% 100%;'">
				<view class="shop-price">￥<text>{{info.price}}</text></view>
				<view class="shop-title hang1">{{info.title}}</view>
				<view class="shop-num">销量:{{info.sale_num}}</view>
			</view>
			<view class="info-detail">
				<view class="title">---- 商品详情 ----</view>
				<view class="desc">
					<rich-text :nodes="info.content"></rich-text>
				</view>
			</view>
			<view class="info-btn" @click="$refs.specPop.open()">
				<image :src="u_imgPath + 'shouye/shop_detail_btn.png'"></image>
			</view>
		</view>
		<!-- 规格 -->
		<uni-popup ref="specPop" type="bottom" :safe-area="false">
			<view class="spec-pop pop-bg">
				<view class="order_title jilvOrderTitle"
					:style="'background: url('+ u_imgPath + 'detail/payTop.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jilvOrderTitle_text">选择规格</view>
					<view class="ca" @click="$refs.specPop.close()">×</view>
				</view>
				<view class="goods-info">
					<image :src="specInfo.goods.pic" mode=""></image>
					<view class="goods-con">
						<view class="title ellipsis-2">{{info.title}}</view>
						<view class="f-s-24">{{specInfo.goods.name}}</view>
						<view class="price">￥<text class="f-s-36">{{specInfo.price}}</text></view>
					</view>
				</view>
				<view class="pop-spec">
					<view class="spec-title">规格</view>
					<view class="spec-item-wrap" v-for="(row,i) in spec" :key="i">
						<view class="item-title">{{row.title}}</view>
						<view class="spec-item">
							<view v-for="(item,index) in row.items" :key="item.k" :class="{active: specId[i] == item.k}"
								@click="changeSpec(item,i)">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<view class="num">
					<view class="">购买数量：</view>
					<uni-number-box background="transparent" v-model="goodsNum" min="1" @change="gitSpecPrice($event)"
						style="filter: contrast(0.9);"></uni-number-box>
				</view>
				<view class="confirm" @click="$refs.dingdan.open(),$refs.specPop.close()">
					<image :src="u_imgPath + 'shouye/shop_detail_btn.png'"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 确认订单 -->
		<uni-popup ref="dingdan" type="bottom" :safe-area="false">
			<view class="order animated fadeInUp">
				<view class="order_title jilvOrderTitle"
					:style="'background: url('+ u_imgPath + 'detail/payTop.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'detail/jilv_p.png'"></image> -->
					<view class="jilvOrderTitle_text">确认订单</view>
					<view class="ca" @click="$refs.dingdan.close()">×</view>
				</view>
				<view class="address" @click="chooseAddress">
					<view class="address-info f-s-28">
						<view v-if="!address.mobile">请添加收货地址</view>
						<view v-if="address.mobile">{{address.name}}-{{address.mobile}}</view>
						<view v-if="address.mobile" class="f-s-24 color-999">{{address.address}}</view>
					</view>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
				<view class="order_title_con1">
					<view class="order_pic" v-if="specInfo.goods">
						<view class="order_pic_img">
							<image :src="specInfo.goods.pic"></image>
						</view>
						<view>
							<view style="font-size: 35rpx;">{{specInfo.goods.goods_name}}</view>
							<view style="margin-top: 40rpx;">类型：{{specInfo.goods.name}}</view>
							<view style="margin-top: 10rpx;">
								<text>
									单价：
									<text style="color: ;">{{specInfo.goods.price}}</text>
									<text>{{'元'}}</text>
								</text>
								<text>×{{specInfo.goods.num}}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx;" v-if="specInfo.goods">
							{{specInfo.goods.name}}×{{specInfo.goods.num}}
						</view>
						<view>
							小计:￥<text>{{specInfo.total_price}}</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1">
					<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
					<template>
						<view class="fangshi" @click="change_yuan_index(1)">
							<view class="flex_center">
								<image :src="u_imgPath+'shouye/wx_pay.png'"></image>
								<view>
									微信支付
								</view>
							</view>
							<image :src="u_imgPath + 'detail/yuan_sel.png'"></image>
						</view>
					</template>

				</view>
				<view style="font-size: 24rpx;" class="order_desc" @click="is_xy = !is_xy">
					<image :src="u_imgPath + 'detail/yuan'+ (is_xy?'_sel':'') +'.png'"></image>
					下单购买即表示同意
					<text style="color: #B07CDD;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:￥<text style="font-size: 40rpx;">{{specInfo.total_price}}</text>
					</view>
					<view class="zhifu" @click="pay()"
						:style="'background: url('+ u_imgPath + 'detail/cj_btn.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>确定支付</text>
					</view>
				</view>
				<view class="order_bottom"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				c_imgPath: '/static/',
				u_imgPath: 'https://qt.yhemall.com/',
				id: '', // 商品id
				info: '',
				spec: null,
				specInfo: null,
				goodsNum: 1,
				specId: [],
				orderInfo: '',
				is_xy: false,
				bi: true, // 1:是否币支付,
				yue: true, // 2:余额支付
				address: {
					// selectCity: '',
					name: '',
					mobile: '',
					address: '',
				},
				payType: 1
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getData()
		},
		methods: {
			pay() {
				let info = {
					goods_id: this.id,
					ks: this.specId.join(),
					num: this.goodsNum,
					pay_type: this.payType,
					...this.address
				}
				this.req({
					url: 'shop_order_buy',
					data: info,
					Loading: true,
					success: (res) => {
						if (res.status == 1) {
							if (res.data.status == 1) {
								this.wxPay(res.data.res)
							} else if (res.data.status == 0) {
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 1000,
									success: () => {
										setTimeout(() => {
											uni.navigateBack()
										}, 1500)
									}
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					}
				})
			},
			wxPay(data) {
				var _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					signType: 'MD5',
					...data,
					complete: (res) => {
						if (res.errMsg == 'requestPayment:fail cancel') {
							uni.showToast({
								title: '取消支付',
								icon: 'loading',
								duration: 1000
							})
						}
						if (res.errMsg == 'requestPayment:ok') {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1000,
								success: () => {
									setTimeout(() => {
										_this.$refs.dingdan.close()
									}, 1500)
								}
							})
						}
					}
				})
			},
			chooseAddress() {
				uni.chooseAddress({
					success: (res) => {
						console.log(res)
						// this.address.selectCity = res.userName + '-' + res.provinceName + '-' + res.cityName + '-' + res
						// 	.countyName + '-' + res.detailInfo + '-' + res.telNumber

						this.address.name = res.userName;
						this.address.mobile = res.telNumber;
						this.address.address = res.provinceName + '-' + res.cityName + '-' + res.countyName +
							'-' + res
							.detailInfo;
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			changeSpec(value, index) {
				this.specId[index] = value.k
				this.gitSpecPrice()
			},
			gitSpecPrice(num) {
				this.req({
					url: 'shop_goods_browse',
					// Loading: true,
					data: {
						goods_id: this.id,
						ks: this.specId.join(),
						num: num || this.goodsNum,
					},
					success: (res) => {
						if (res.status == 1) {
							this.specInfo = res.data
						}
					}
				})
			},
			getData() {
				this.req({
					url: 'shop_goods_detail',
					Loading: true,
					data: {
						goods_id: this.id
					},
					success: (res) => {
						if (res.status == 1) {
							this.info = res.data;
							this.spec = res.data.spec_data
							this.specId = this.spec.map(i => i.items[0].k)
							this.gitSpecPrice()
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.goods-img {
		width: 750rpx;
		height: 750rpx;
	}

	.info-shop {
		width: 750rpx;
		height: 108rpx;
		display: flex;
		align-items: center;
		position: relative;

		.shop-price {
			font-size: 28rpx;
			padding: 48rpx 0 0 24rpx;

			text {
				font-size: 40rpx;
			}

			background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.shop-title {
			padding: 48rpx 0 0 50rpx;
			width: 400rpx;
			color: #FFFFFF;
			font-size: 26rpx;
		}

		.shop-num {
			position: absolute;
			right: 20rpx;
			top: 10rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.info-detail {
		padding: 20rpx;

		.title {
			color: #BC66FF;
			text-align: center;
		}

		.desc {
			margin-top: 20rpx;
		}
	}

	.info-btn {
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		text-align: center;

		image {
			width: 690rpx;
			height: 128rpx;
		}
	}

	.spec-pop {
		font-size: 28rpx;
		background-color: #0F0E1C;
		color: #FFFFFF;

		.order_title>image {
			width: 275rpx;
			height: 88rpx;
			position: absolute;
			left: 30rpx;
			top: -44rpx;
		}

		.jilvOrderTitle {
			display: flex;
			align-items: center;
			height: 89rpx;

			.jilvOrderTitle_text {
				flex: 1;
				text-align: center;
				margin-top: 20rpx;
				font-size: 40rpx;
				background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.ca {
				position: absolute;
				right: 20rpx;
			}
		}

		.goods-info {
			display: flex;

			image {
				flex-shrink: 0;
				width: 190rpx;
				height: 190rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}

			.goods-con {
				flex: 1;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.title {}

				.price {
					margin-top: 30rpx;
					color: #B18DD6;

					text {}
				}
			}
		}

		.coupon {
			height: 98rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #D8D8D8;

			.coupon-name {}

			.coupon-con {
				flex: 1;
				text-align: end;
				box-sizing: border-box;
				padding: 0 20rpx;
				color: #999999;

				text {}
			}
		}

		.pop-spec {
			padding: 0 20rpx 60rpx;
			border-bottom: 1rpx solid #D8D8D8;

			.spec-title {
				line-height: 88rpx;
			}

			.spec-item-wrap {
				margin-top: 20rpx;

				&:nth-child(1) {
					margin-top: 0;
				}

				.item-title {
					line-height: 60rpx;
				}
			}

			.spec-item {
				display: flex;
				flex-wrap: wrap;
				gap: 30rpx;

				>view {
					// width: 112rpx;
					padding: 0 30rpx;
					height: 58rpx;
					box-sizing: border-box;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #FFFFFF;
					font-size: 24rpx;
					line-height: 58rpx;
					color: #FFFFFF;

				}

				.active {
					background: #B75AFF;
					border: none;
				}
			}
		}

		.num {
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			view {}
		}

		.confirm {
			text-align: center;

			image {
				width: 690rpx;
				height: 128rpx;
			}
		}
	}

	.address {
		margin: 24rpx auto 0;
		width: 690rpx;
		background: #090909;
		border: 2rpx solid #B07CDD;
		border-radius: 17rpx;
		height: 130rpx;
		padding: 0 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		>image {
			width: 60rpx;
			height: 60rpx;
		}

		.address-info {
			flex: 1;
			padding-left: 20rpx;
		}
	}

	.zhifu {
		width: 240rpx;
		height: 68rpx;
		font-size: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.zhifu text {
		font-weight: bold;
		background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.order_desc {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.order_bottom {
		height: env(safe-area-inset-bottom);
	}

	.order_title_btn {
		width: 690rpx;
		height: 98rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.order_num text {
		font-size: 32rpx;
		color: #B07CDD;
	}

	.order_num>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.order_num {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #333333;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.order_pic>view>view:nth-of-type(3) {
		display: flex;
		justify-content: space-between;
		width: 410rpx;
	}

	.order_pic>view:nth-of-type(2) {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.order_pic_img>image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}

	.order_pic_img {
		width: 188rpx;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		background: #090909;
		border: 2rpx solid #B07CDD;
		border-radius: 17rpx;
		margin: auto;
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;

		.order_coupon {
			display: flex;
			align-items: center;

			.coupon_text {
				flex: 1;
			}

			.coupon_money {
				color: #B07CDD;
			}
		}
	}

	.order_title>image {
		width: 275rpx;
		height: 88rpx;
		position: absolute;
		left: 30rpx;
		top: -44rpx;
	}

	.jilvOrderTitle {
		display: flex;
		align-items: center;
		height: 89rpx;

		.jilvOrderTitle_text {
			flex: 1;
			text-align: center;
			margin-top: 20rpx;
			font-size: 40rpx;
			background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.ca {
			position: absolute;
			right: 20rpx;
		}
	}

	.order_title {
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		position: relative;
		text-align: right;
	}

	.order {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 30rpx 30rpx 0px 0px;
		// border: 5rpx solid #FF7315;
		border-bottom: none;
		position: absolute;
		bottom: 0;
		// padding: 10rpx 30rpx 50rpx;
		box-sizing: border-box;
		color: #FFFFFF;

		.fangshi text {
			color: #B07CDD;
		}

		.fangshi>view>image {
			margin-right: 20rpx;
		}

		.fangshi image {
			width: 40rpx;
			height: 40rpx;
		}

		.fangshi {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 60rpx;
			align-items: center;
		}
	}
</style>